<template>
	<view class="page">
		<nav-bar />
		<view class="content">
			<!-- wifi连接 -->
			<wifi ref="wifi" />
			<view class="model">
				<view class="model_title">模型列表</view>
				<view class="model_nav l-f">
					<view 
					@click="navClick(index)"
					class="model_nav_item l-f1"
					hover-class="hover-class"
					v-for="(item,index) in navList"
					:key="index">{{item}}</view>
					<view 
					class="model_nav_bg" 
					:class="navIndex === 1 ? 'model_nav_active' : ''">{{navIndex === 0 ? '下载' : '更新'}}</view>
				</view>
				<scroll-view scroll-y="true" class="model_list" :scroll-top="scrollTop">
					<block  
					v-for="(item,index) in modelList"
					 :key="index">
					 <view v-show="navIndex === index">
					 	<model-item
					 	 v-for="(item,index) in modelList[index]"
					 	 :key="item.id"
					 	 :options="item"
					 	 :current="navIndex"
					 	 @download="onDownloadModel"
					 	 @update="onUpdateModel(index)"
					 	 />
					 	 <uni-load-more :status="navStatus" iconType="snow"></uni-load-more>
					 </view>
					 </block>
					
				</scroll-view>
			</view>
		</view>
		<!-- model-update -->
		<model-update ref="popupUpdate" :progress="progress" @closeUpdate="onCloseUpdate" />
		<Tabbar :current="1" />
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/nav-bar.vue'
	import Wifi from '@/components/wifi/wifi.vue'
	import Tabbar from '@/components/tabbar/tabbar.vue'
	import VideoItem from '@/components/video-item/video-item.vue'
	import ModelItem from '@/components/model-item/model-item.vue'
	import ModelUpdate from '@/components/model-update/model-update.vue'
	export default {
		components: {
			NavBar,
			Wifi,
			Tabbar,
			VideoItem,
			ModelItem,
			ModelUpdate
		},
		data() {
			return {
				scrollTop: 0,
				videoList: [
					{
						id: 1,
						name: '视频1',
						size: 300,
						status: 1
					},
					{
						id: 2,
						name: '视频2',
						size: 300,
						status: 1
					}
				],
				navList: ['下载','更新'],
				navIndex: 0,
				modelList: [
					[
						{
							id: 1,
							name: '模型模型1模型11',
							number: '123445566'
						},
						{
							id: 2,
							name: '模型模型1模型11',
							number: '123445566'
						},
						{
							id: 3,
							name: '模型模型1模型11',
							number: '123445566'
						},
						{
							id: 4,
							name: '模型模型1模型11',
							number: '123445566'
						},
						{
							id: 5,
							name: '模型模型1模型11',
							number: '123445566'
						}
					],
					[
						{
							id: 1,
							name: '模型模型2模型22',
							number: '123445566',
							status: 0
						},
						{
							id: 2,
							name: '模型模型2模型22',
							number: '123445566',
							status: 0
						},
						{
							id: 3,
							name: '模型模型2模型22',
							number: '123445566',
							status: 1
						},
						{
							id: 4,
							name: '模型模型2模型22',
							number: '123445566',
							status: 0
						},
						{
							id: 5,
							name: '模型模型2模型22',
							number: '123445566',
							status: 0
						}
					]
				],
				navStatus: 'noMore',
				progress: 0,
				timeId: null
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		methods: {
			// nav切换
			navClick(index) {
				this.navIndex = index
				this.scrollTop = 0
			},
			// 关闭模型更新
			onCloseUpdate() {
				uni.showModal({
					title: '提示',
					content: "确定停止更新吗？",
					success: (e) => {
						if(e.confirm) {
							clearInterval(this.timeId)
							this.$refs.popupUpdate.close()
						}
					}
				})
			},
			// 模型下载
			onDownloadModel() {
				setTimeout(() => {
					uni.showToast({
						title: '下载完成!',
						icon: 'none',
						position: 'bottom'
					})
				},1500)
			},
			// 模型更新
			onUpdateModel(index) {
				this.$refs.popupUpdate.open()
				// 模拟更新
				this.timeId = setInterval(()=> {
					let num = parseInt(Math.random()*20)
					if(this.progress + num >= 100) {
						this.progress = 100
						clearInterval(this.timeId)
						uni.showToast({
							title: '模型更新完成',
							icon: 'none',
							position: 'top'
						})
						this.$set(this.modelList[1][index],'status',1)
						this.$refs.popupUpdate.close()
						this.progress = 0
					}else {
						this.progress += num
					}
				},1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/model/model.scss";
</style>
